import React from "react";
import { Button, Checkbox, Form, Input } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { loginAction, loginActionAsync } from "../../store/actions/userAction";
import { loginApi } from "../../http/api/userApi";
import "./index.scss";

export default function Login() {
  const navigate = useNavigate();

  const dispatch = useDispatch();

  const onFinish = (values) => {
    console.log("Success:", values);
    // loginApi(values)
    //   .then(res => {
    //     console.log('请求成功：', res.data);
    //     if (res.data.code == '200') {
    //       dispatch(loginAction(res.data.data));
    //     } else {
    //       console.log(res.data.msg);
    //     }
    //   })
    //   .catch(err => {
    //     console.log('请求失败：', err);
    //   })

    // dispatch(loginAsync(values))
    //   .then(() => {
    //     navigate('/');
    //   })
    dispatch(loginActionAsync(values))
      .then((res) => {
        console.log("登陆完成");
        navigate("/");
      })
      .catch((err) => {
        console.log("登陆失败", err);
      });
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <div className="manage-login">
      <Form
        name="login_form"
        className="login_form"
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: "Please input your username!",
            },
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="用户名"
          />
        </Form.Item>

        <Form.Item
          name="pwd"
          rules={[
            {
              required: true,
              message: "Please input your password!",
            },
          ]}
        >
          <Input.Password
            prefix={<LockOutlined className="site-form-item-icon" />}
            placeholder="密码"
          />
        </Form.Item>

        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住密码</Checkbox>
          </Form.Item>

          <a className="login_form_forgot" href="">
            忘记密码
          </a>
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login_form_button"
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
